.menuButton {
  cursor: pointer;
}

.bar {
  width: 1.5rem;
  height: 0.1rem;
  margin: 0.5rem auto;
  border-radius: 10px;
  transition: 0.3s;
}

.menuButton:hover .bar:nth-of-type(1) {
  transform: translateY(1.5px) rotate(-4.5deg);
}
.menuButton:hover .bar:nth-of-type(2) {
  opacity: 0.9;
}
.menuButton:hover .bar:nth-of-type(3) {
  transform: translateY(-1.5px) rotate(4.5deg);
}

.cross .bar:nth-of-type(1) {
  transform: translateY(0.6rem) rotate(-45deg);
}
.cross .bar:nth-of-type(2) {
  opacity: 0;
}
.cross .bar:nth-of-type(3) {
  transform: translateY(-0.6rem) rotate(45deg);
}

.cross:hover .bar:nth-of-type(1) {
  transform: translateY(1.1rem) rotate(45deg);
}
.cross:hover .bar:nth-of-type(2) {
  opacity: 0;
}
.cross:hover .bar:nth-of-type(3) {
  transform: translateY(-1.1rem) rotate(-45deg);
}